import { InfoCircleFilled } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, Typography } from 'antd';

import { projectUpdate } from '@/services/workBench';
import { useStoreWorkbench } from '@/store/workbench';
import { useEffect } from 'react';
import styles from './index.less';
const { Title } = Typography;

const Setup: React.FC = ({}) => {
  const { currentMenuItem, projectData, userDataList } = useStoreWorkbench();
  const [form] = Form.useForm();

  const init = async () => {
    const flag = projectData.find(
      (item) => String(item.id) === String(currentMenuItem?.projectId),
    );
    if (flag) {
      form.setFieldsValue({
        ...flag,
        projectMemberList: flag.projectMemberList?.map(
          (item: { userId: any }) => item.userId,
        ),
      });
    }
  };

  useEffect(() => {
    if (currentMenuItem) {
      init();
    }
  }, [currentMenuItem]);

  const handleSave = async () => {
    form.validateFields().then(async (values) => {
      console.log('values', values);
      const param = {
        ...values,
      };
      if (values?.projectMemberList?.length > 0) {
        param.projectMemberList = values.projectMemberList.map((item: any) => ({
          userId: item,
        }));
      }
      await projectUpdate(param);
      document.dispatchEvent(new CustomEvent('emitSearch'));
    });
  };

  return (
    <div className={styles['setup']}>
      <div className={`flex-left ${styles['header-wrap']}`} onClick={() => {}}>
        <InfoCircleFilled
          style={{ marginRight: 10, fontSize: 20, color: '#dc2e00' }}
        />
        会员中台的成员可以编辑此项目
      </div>

      <div className={`${styles['form-wrap']}`}>
        <Title level={3}>项目信息</Title>
        <Form form={form} layout="vertical">
          <Form.Item hidden label="id" name="id">
            <Input placeholder="id" />
          </Form.Item>
          <Row>
            <Col span={24}>
              <Form.Item
                label="项目名称"
                name="name"
                rules={[{ required: true, message: '不得为空' }]}
              >
                <Input placeholder="请输入项目名称" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="项目简介"
                name="description"
                rules={[{ required: false, message: '不得为空' }]}
              >
                <Input.TextArea rows={3} placeholder="请输入项目简介" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="项目负责人"
                name="ownerId"
                rules={[{ required: true, message: '不得为空' }]}
              >
                <Input placeholder="请输入" />
                {/* <Select placeholder="请选择" options={userDataList} /> */}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="项目成员"
                name="projectMemberList"
                rules={[{ required: false, message: '不得为空' }]}
              >
                <Select
                  mode="multiple"
                  placeholder="请选择"
                  options={userDataList}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="项目ID"
                name="id"
                rules={[{ required: true, message: '不得为空' }]}
              >
                <Input placeholder="请输入项目ID" disabled />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="项目Git ID"
                name="giteeProjectId"
                rules={[{ required: true, message: '不得为空' }]}
              >
                <Input placeholder="请输入项目Git ID" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="Git 地址"
                name="gitSshUrl"
                rules={[{ required: true, message: '不得为空' }]}
              >
                <Input placeholder="请输入项目Git 地址" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="飞书目录"
                name="feishuUrl"
                rules={[{ required: false, message: '不得为空' }]}
              >
                <Input placeholder="请输入飞书目录地址" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <div className="flex-right">
          {/* <Button
            style={{ marginRight: 10, width: 80 }}
            size="small"
            type="default"
            onClick={() => {}}
          >
            取消
          </Button> */}
          <Button
            style={{ marginRight: 10, width: 80 }}
            size="small"
            type="primary"
            onClick={() => {
              handleSave();
            }}
          >
            保存
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Setup;
